<!--
 * @Author: ukemuzi ukel@aliyun.com
 * @Date: 2025-05-06 11:53:42
 * @LastEditors: ukemuzi ukel@aliyun.com
 * @LastEditTime: 2025-11-21 09:33:05
 * @FilePath: \html-life\picture-in-picture\picture-in-picture.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
	</head>
	<body>
		<video id="myVideo" src="https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4" controls width="300"></video>
		<!-- <video id="myVideo" src="http://liteavapp.qcloud.com/live/liteavdemoplayerstreamid" controls width="300"> -->
		</video>
		
		<button id="pipButton">开启画中画</button>
		<script>
			const video = document.getElementById('myVideo');
			// if (Hls.isSupported()) {
			// 	var hls = new Hls();
			// 	hls.loadSource(
			// 		'https://svs.itworkscdn.net/kingdomsatlive/kingdomsat.smil/playlist_dvr.m3u8'
			// 		); // 替换为你的HLS直播流地址
			// 	hls.attachMedia(video);
			// 	hls.on(Hls.Events.MANIFEST_PARSED, function() {
			// 		video.play();
			// 	});
			// }
			const pipButton = document.getElementById('pipButton');

			pipButton.addEventListener('click', async () => {
				// 先检查浏览器支不支持，是个好习惯
				if (document.pictureInPictureEnabled) {
					try {
						// 如果视频没在画中画模式，就请求进入
						if (document.pictureInPictureElement !== video) {
							await video.requestPictureInPicture();
						} else {
							// 如果已经在画中画了，就退出
							await document.exitPictureInPicture();
						}
					} catch (error) {
						console.error('操作画中画失败:', error);
					}
				} else {
					console.log('你的浏览器不支持画中画功能。');
				}
			});

			// 还可以监听进入和退出的事件，搞点事情
			video.addEventListener('enterpictureinpicture', () => {
				console.log('进入画中画啦！');
				pipButton.textContent = '退出画中画';
			});

			video.addEventListener('leavepictureinpicture', () => {
				console.log('退出画中画了。');
				pipButton.textContent = '开启画中画';
			});
		</script>
	</body>
</html>